import React, {Component} from 'react';
// import '@atlaskit/css-reset'
import {DragDropContext} from 'react-beautiful-dnd';
import styled from 'styled-components';

import initialData from './todoData';
import Column from './column';

const Container = styled.div`
  display: flex;
`;

export default class ReactBeautifulTodo extends Component {
  state = initialData;

  onDragEnd = result => {
    console.log(result, 1111111111);
    const {destination, source, draggableId} = result;
    if (!destination) {
      return;
    }

    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }
    const start = this.state.columns[source.droppableId];
    const finish = this.state.columns[destination.droppableId];

    if (start === finish) {
      const newTaskIds = Array.from(start.taskIds);
      newTaskIds.splice(source.index, 1);
      newTaskIds.splice(destination.index, 0, draggableId);

      const newColumn = {
        ...start,
        taskIds: newTaskIds
      };

      const newState = {
        ...this.state,
        columns: {
          ...this.state.columns,
          [newColumn.id]: newColumn
        }
      };

      this.setState(newState);
      return;
    }


    /*const startTaskIds = Array.from(start.taskIds)
    startTaskIds.splice(source.index, 1)
    const newStart = {
      ...start,
      taskIds: startTaskIds
    }*/

    const finishTaskIds = Array.from(finish.taskIds);
    finishTaskIds.splice(destination.index, 0, draggableId.split('_')[0]);
    const newFinish = {
      ...finish,
      taskIds: finishTaskIds
    };

    const newState = {
      ...this.state,
      columns: {
        ...this.state.columns,
        [newFinish.id]: newFinish
      }
    };
    this.setState(newState, () => {
      console.log(this.state, 222222222222);
    });
  };
  onDragStart = (res) => {
    console.log(res, 2222222222222);
  };

  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd} onDragStart={this.onDragStart}>
        <Container>
          <Column isDropDisabled column={this.state.columns["column-1"]}
                  tasks={this.state.columns["column-1"].taskIds}/>
          <Column column={this.state.columns["column-2"]} tasks={this.state.columns["column-2"].taskIds}/>
        </Container>
      </DragDropContext>
    );
  }
}
